<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title></title>  
    <script type="text/javascript" src="../js/ol.js" ></script>
   <link rel="stylesheet" href="../css/ol.css" />
    <style type="text/css">  
        body,html,div{  
            border:none;padding:0;margin:0;  
            font-size:14px;  
            font-family:"微软雅黑";  
        }  
        #menu{  
            width:100%;  
            height:20px;           
            padding:5px 10px;  
            left:10px;      
        }  
        .container{  
            float:left;  
            width:48%;  
            height:850px;  
            margin:0 5px;  
            margin-left:10px;   
        }          
        .map{  
            float:left;  
            width:100%;  
            height:100%;  
            border:1px dashed red;  
        }  
    </style>  
    <script type="text/javascript">  
        window.onload = function () {  
            //定义一个变量，用来存储投影变换后的地图  
            var transformMap;  
            //初始化矢量图层  
            var vector = new ol.layer.Vector({  
                source: new ol.source.Vector({  
                    url: '../data/geojson/countries-110m.json',  
                    format:new ol.format.GeoJSON()  
                })  
            });  
  
            //初始化地图  
            var map = new ol.Map({  
                layers: [  
                    new ol.layer.Tile({  
                        source:new ol.source.OSM()  
                    }),  
                    vector  
                ],  
                //渲染方式  
                render: 'canvas',  
                target: 'map1',  
                view: new ol.View({  
                    //EPSG:3857投影  
                    projection: ol.proj.get('EPSG:3857'),  
                    //分辨率  
                    resolutions: [65536, 32768, 16384, 8192, 4096, 2048],  
                    center: [0, 0],  
                    zoom:2  
                })  
            });  
            //显示网格参考  
            var graticule = new ol.Graticule({  
                map: map  
            })  
  
            //定义球形摩尔魏特投影坐标系  
            proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' +  
            '+b=6371000 +units=m +no_defs');  
  
            //定义球形摩尔魏特投影  
            var sphereMollweideProjection = new ol.proj.Projection({  
                //编号  
                code: 'ESRI:53009',  
                //显示范围  
                extent: [-9009954.605703328, -9009954.605703328, 9009954.605703328, 9009954.605703328],  
                //世界经纬度范围  
                worldExtent: [-179, -90, 179, 90]  
            });  
  
            //进行投影转换  
            document.getElementById('projection').onclick = function () {  
                //如果当前投影转换的地图为空或者未定义，则创建一个map对象  
                if (transformMap == null || transformMap == undefined) {  
                    transformMap = new ol.Map({  
                        layers: [  
                            new ol.layer.Vector({  
                                source: new ol.source.Vector({  
                                    url: '../data/geojson/countries-110m.json',  
                                    format:new ol.format.GeoJSON()  
                                })  
                            })  
                        ],  
                        render: 'canvas',  
                        target: 'map2',  
                        view: new ol.View({  
                            //指定投影为球形摩尔魏特投影  
                            projection: sphereMollweideProjection,  
                            resolutions: [65536, 32768, 16384, 8192, 4096, 2048],  
                            center: [0, 0],  
                            zoom: 2  
                        })  
                    });  
                    var graticule = new ol.Graticule({  
                        map:transformMap  
                    })  
                }  
            };  
        };  
    </script>  
</head>  
<body>  
    <div id="menu">  
        <label class="title" for="projection">  
            地图投影转换演示：<button id="projection">投影转换</button>  
        </label>  
    </div>  
    <div class="container">  
        <label>投影坐标系(EPSG:3857)</label>  
        <div id="map1" class="map"></div>  
    </div>  
    <div class="container">  
        <label>投影坐标系(ESRI:53009)</label>  
        <div id="map2" class="map"></div>  
    </div>  
</body>  
</html>  